import React, {Component} from 'react';
import {message,Row, Col,Icon, Timeline} from 'antd';


class About extends Component {
    constructor(props) {
        super(props);
        if (window.erred && window.erred > 3 && window.erred < 6) {
            message.error('你已经受限访问');
            window.erred = window.erred + 1;
        } else if (window.erred && window.erred > 5) {
            window.location.replace("http://news.baidu.com/")
        }

        var oneDay = 24*60*60*1000;
        var start = new Date();
        this.state = {
            oneDay:oneDay ,
            start :start,

        }
    }

    render() {

        const {start,oneDay } = this.state;

        return (
            <div className="gutter-example">
                <Row gutter={8}>
                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                        <p>邮 箱 <Icon type="mail" style={{marginRight: 8}}/>nick070809@163.com</p>
                        <p>坐 标 <Icon type="environment-o" style={{marginRight: 8}}/>杭州·中国</p>
                        <p>能 力 <Icon type="dashboard" style={{marginRight: 8}}/>java  /scala /mysql /oracle
                            /react</p>
                        <p>最 近 <Icon type="instagram" style={{marginRight: 8}}/>linux</p>
                        <p>&nbsp;</p>
                    </Col>

                    <Col xs={24} sm={24} md={3} lg={3} xl={3}></Col>
                    <Col xs={24} sm={24} md={9} lg={9} xl={9}>

                        <Timeline >
                            <Timeline.Item color="blue">2016-杭州</Timeline.Item>
                            <Timeline.Item color="green">2012-重庆</Timeline.Item>
                            <Timeline.Item color="green">2010-福州</Timeline.Item>
                            <Timeline.Item color="red">2006-杭州</Timeline.Item>
                        </Timeline>
                    </Col>
                </Row>

                <Row gutter={8}>
                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                        <p><a href='#/dp/font'>写在前面的话</a></p>
                        <p><span style={{"background":"#a7a78c","color":"aquamarine"}} >与未来致齐,Self-regulation</span></p>
                       {/* <p> | 07：05 起床 | 07：30 跑步 | 08：30 洗漱 | 09：00 工作 |</p>
                        <p> | 12：20 午餐 | 12：50 午休 | 14：00 工作 |</p>
                        <p> | 18：20 晚餐 | 19：00 工作 | 21：00 回家 | 22：00 学习 |</p>
                        <p> | 23：00 睡觉 |</p>*/}
                    </Col>
                    <Col xs={24} sm={24} md={2} lg={2} xl={2}></Col>
                    <Col xs={24} sm={24} md={10} lg={10} xl={10}>
                        <br/><br/>
                        <p> 距离2020 5.7   还有 { Math.ceil((new Date(2020,(5-1),7) -start)/oneDay) } 天</p>
                        <p> 距离2021 5.7   还有 { Math.ceil((new Date(2021,(5-1),7) -start)/oneDay) } 天</p>
                        <p> 距离2022 5.7   还有 { Math.ceil((new Date(2022,(5-1),7) -start)/oneDay) } 天</p>
                        <p> 距离2022 亚运  还有 { Math.ceil((new Date(2022,(9-1),10) -start)/oneDay) } 天</p>
                        <p> 距离2019 10月15日  已有 {Math.ceil((start -new Date(2019,(10-1),15))/oneDay) }天</p>
                    </Col>
                </Row>


            </div>
        );
    }
}

export default About;